<template>
  <view class="header">
    <view class="header-left">
      <image
        src="https://mp-9cd2f666-e017-4f0e-a8b2-2c4583bc29c1.cdn.bspapp.com/waimaoWeb/basicprofile.jpeg"
        class="header-left-img"
        mode="widthFix"
      ></image>
    </view>

    <view class="header-right" @click="menuShow = true">
      <u-icon name="list" size="40rpx"></u-icon>
    </view>

    <u-popup v-model="menuShow" mode="top" closeable :blur="3">
      <view class="menuVeiw">
        <image
          src="https://mp-9cd2f666-e017-4f0e-a8b2-2c4583bc29c1.cdn.bspapp.com/waimaoWeb/basicprofile.jpeg"
          class="logoImg"
          mode="heightFix"
        ></image>
        <view class="meunUi">
          <view
            class="menuItem"
            v-for="(item, index) in meunList"
            :key="index"
            :class="{ action: routePath == item.path }"
            @click="toPath(item)"
          >
            <view>{{ item.name }}</view>
            <u-icon
              name="arrow-right"
              size="20rpx"
              :color="routePath != item.path ? '#4b5563' : '#b7922d'"
            ></u-icon>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";

const props = defineProps({
  meunList: {
    type: Array,
    default: () => [],
  },
  routePath: {
    type: String,
    default: "",
  },
});

const menuShow = ref(false); //控制菜单显示
const toPath = (item) => {
  uni.navigateTo({
    url: `/${item.path}`,
  });
  menuShow.value = false;
};
</script>

<style scoped lang="scss">
.header {
  width: 100vw;
  height: 80rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;

  .header-left {
    display: flex;
    align-items: center;

    .header-left-img {
      width: 60rpx;
      height: auto;
    }
  }

  .header-right {
    display: flex;
    align-items: center;

    .header-right-img {
      width: 40rpx;
      height: 40rpx;
    }
  }
}

.menuVeiw {
  width: 100vw;
  height: auto;
  background-color: #fff;
  padding: 80rpx 20rpx 20rpx;
  position: relative;
  box-sizing: border-box;

  .logoImg {
    width: auto;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 20rpx;
    left: 20rpx;
  }

  .meunUi {
    width: 100%;
    height: auto;
    border-top: 1px solid #eee;
    margin-top: 10rpx;
  }

  .menuItem {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-size: 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #4b5563;

    &.action {
      color: #b7922d;
    }
  }
}
</style>
